<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>管理员登录</title>
  <style></style>
</head>
<body>
  <h1>管理员登录</h1>
  <hr>
  <input type="text" placeholder="管理员名" id="adminuser">
  <input type="password" name="upwd" placeholder="密码" id="adminpwd">
  <button id="btn">登录</button>
  <!-- ajax脚本 -->
  <script>
      var adminuser=document.getElementById('adminuser');
      var adminpwd=document.getElementById('adminpwd');
      var btn=document.getElementById('btn');
      // 2.事件触发
      btn.onclick=function(){
        //3.收集用户数据(注意非空)
        var namesval=adminuser.value.trim();
        var pwdval=adminpwd.value.trim();
        //4.判断[两个都不为空]
        if(namesval&&pwdval){
          //5.调用ajax函数
          ajax(namesval,pwdval);
        }else{
          alert('用户名和密码不能为空');
        }
      }
      function ajax(namesval,pwdval){
          var xhr=new XMLHttpRequest();
          xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
              if(xhr.status>=200&&xhr.status<300){
                var result=JSON.parse(xhr.responseText);
                if(result.code){
                   alert('登陆成功');
                   window.location.href="./list.html";
                }else{
                  alert('用户名或密码错误');
                }  
                //console.log(xhr.responseText);
              }
            }
          };
          xhr.open('POST','/admin/login',true);
          xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
          xhr.send(`anames=${namesval}&apwd=${pwdval}`);
      }
  </script>
</body>
</html>